<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<button class="btn1">发送请求</button>
<button class="btn2">取消请求</button>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
// 在浏览器使用:基于Promise对ajax进行封装
// 在node.js使用:基于Promise对象http进行封装
// Axios是VUE官方推荐使用的http请求库

let btn1 = document.querySelector('.btn1')
let btn2 = document.querySelector('.btn2')

let source = axios.CancelToken.source()

// 发送请求
btn1.onclick = function (){
    console.log( '发送请求...' )

    axios.get('http://localhost:8080/users/data',{// config
        params: {
            a: 123,
            b:456
        },
        cancelToken: source.token
    })
    .then((res)=>{
        console.log( res.data )
    })
    .catch((err)=>{
        console.log( err )
    })
    
}
// 取消请求
btn2.onclick = function (){
    console.log( '取消请求...' )
    source.cancel('取消请求')
}

</script>
</body>
</html>